<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <!-- 头 -->
        <todo-header>
            <template v-slot:title>{{title}}</template>
            <template #subtitle>{{subtitle}}</template>
        </todo-header>

        <!-- 输入 -->
        <todo-input @add-todo-item="addTodoItemHandler" v-model="inputValue" @keydown="keyDownHandler"></todo-input>

        <!-- 列表 -->
        <todo-list :todos="todos" @delete-item="deleteItemHandler"></todo-list>
    </div>

    <script src="./libs/vue.js"></script>
    <script>
        const App = new Vue({
            el: '#root',
            data: {
                title: '待办事项列表',
                subtitle: '今天星期五呀',
                todos: [{
                    id: 1,
                    title: 'asdfkj',
                    completed: true
                }, {
                    id: 2,
                    title: 'ouou',
                    completed: false
                }],
                inputValue: ''
            },
            created() {
                fetch('https://jsonplaceholder.typicode.com/todos')
                    .then(res => res.json())
                    .then(data => {
                        this.todos = data
                    })
            },
            methods: {
                deleteItemHandler(id) {
                    this.todos = this.todos.filter(todo => todo.id !== id)
                },
                addTodoItemHandler() {
                    this.todos.unshift({
                        id: Math.random(),
                        title: this.inputValue,
                        completed: false
                    })
                    this.inputValue = ''
                },
                keyDownHandler(e) {
                    if (e.keyCode === 13)
                        this.addTodoItemHandler()
                }
            },
            components: {
                /**
                 * 头
                 */
                TodoHeader: {
                    template: `
            <div>
              <h1><slot name="title"></slot></h1>
              <h3><slot name="subtitle"></slot></h3>
            </div>
          `
                },
                /**
                 * 输入待办事项
                 */
                TodoInput: {
                    template: `
            <div>
              <input type="text" :value="value" v-on="allListeners"/>
              <button @click="$emit('add-todo-item')">添加</button>
            </div>
          `,
                    props: ['value'],
                    computed: {
                        allListeners() {
                            const _self = this
                            return {
                                ...this.$listeners,
                                input(e) {
                                    _self.$emit('input', e.target.value)
                                }
                            }
                        }
                    }
                },
                /**
                 * 列表
                 */
                TodoList: {
                    template: `
            <ol>
              <TodoItem
                v-for="todo in todos"
                :todo="todo"
                :key="todo.id"
                @delete-item="$emit('delete-item', todo.id)"
              ></TodoItem>
            </ol>
          `,
                    props: {
                        todos: Array
                    },
                    components: {
                        TodoItem: {
                            template: `
                <li>
                  {{todo.title}}
                  -
                  {{status}}
                  <button @click="todo.completed = !todo.completed">修改状态</button>
                  <button @click="$emit('delete-item')">删除</button>
                </li>
              `,
                            props: ['todo'],
                            computed: {
                                status() {
                                    return this.todo.completed ? '已完成' : '未完成'
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>